<template>
	<div class="outer">
    <headers @back-click="back()" :headers="headers"></headers>
    <scroll :topArea="44" ref="messageDetail" @pullingDown="onpullingDown" @pullingUp="onpullingUp" :data="lst">
      <div class="message-wrapper" v-if="lst.length > 0">
        <div class="msg-content" v-for="i in lst" :key="i.id" :class="{ 'read': i.read || i.ischecked}" @click="changeRead(i)">
          <div class="msg-title">
            <div class="msg-name">{{i.title}}</div>
            <div class="msg-time">{{i.createTime}}</div>
          </div>
          <div class="msg-detail">{{i.content}}</div>
        </div>
      </div>
      <blank-page v-else></blank-page>
    </scroll>
  </div>
</template>

<script>
import blankPage from '@/components/blankPage'
import {getMessage,updateMessage} from "@/api/homepage.js"
export default {
  name: 'collectPage',
  data: function(){
    return {
      headers: {
        title: "消息通知"
      },
      pageNum: 1,
      pageSize: 10,
      hasMore: true,
      lst: [],
      checkedMsg: "",
    }
  },
  components: {
    blankPage,
  },
  methods: {
    back: function(){
      this.$router.go(-1);
    },
    onpullingDown: function(){
      let param = {};
      param.ids = this.checkedMsg;
      updateMessage(param).then( data => {
        if(data.code == 200){
          this.messages();
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
          this.$refs.messageDetail.forceUpdate();
        }
      });
      this.checkedMsg = "";
    },
    onpullingUp: function(){
      if(!this.hasMore){
        this.$refs.messageDetail.forceUpdate();
        return
      }else {
        this.loadMore();
      } 
    },
    messages: function(){
      this.pageNum = 1;
      getMessage(this.pageNum).then( data => {
        if(data.code == 200){
          this.lst = data.data.list;
          this.lst.forEach(function(item){
            var temDate = new Date(item.createTime);
            item.createTime = temDate.getFullYear() + '-' + (temDate.getMonth()+1) + "-" + temDate.getDate() + " " + temDate.getHours() + ":" + (temDate.getMinutes() == 0 ? "00" : temDate.getMinutes());
            item.ischecked = item.read;
          })
          if(data.data.list.length < this.pageSize){
            this.hasMore = false;
          }else {
            this.hasMore = true;
          }
        }else {
          this.$refs.messageDetail.forceUpdate();
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
        }
      })
    },
    loadMore: function(){
      this.pageNum++;
      getMessage(this.pageNum).then( data => {
        if(data.code == 200){
          if(data.data && data.data.list.length>0){
            if(data.data.list.length<this.pageSize){
              this.hasMore = false;
            }else {
              this.hasMore = true;
            }
            let temData = data.data.list;
            temData.forEach(function(item){
                var temDate = new Date(item.createTime);
                item.ischecked = item.read;
                item.createTime = temDate.getFullYear() + '-' + (temDate.getMonth()+1) + "-" + temDate.getDate() + " " + temDate.getHours() + ":" + (temDate.getMinutes() == 0 ? "00" : temDate.getMinutes());
            })
            this.lst=this.lst.concat(temData);
          }else {
            this.$refs.messageDetail.forceUpdate();
          }
        }else {
          this.$refs.messageDetail.forceUpdate();
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
        }
      })
    },
    changeRead: function(i){
      this.checkedMsg += i.id + ",";
      i.ischecked = true;
      this.$forceUpdate();
    }
  },
  mounted: function(){
    this.messages();
  },
  beforeDestroy: function(){
    let param = {};
    param.ids = this.checkedMsg;
    updateMessage(param).then( data => {
      if(data.code != 200){
        this.$vux.toast.show({
          text: data.message,
          time: 1000,
          width: 'auto',
          // position: 'middle'
        })
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.outer {
    height: 100%;
    width: 100%;
    position: absolute;
  }
.msg-content {
  display: flex;
  background: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 8px 16px;
  &:not(:last-child){
      border-bottom: 1px solid #f7f7f7;
  }
  &.read {
      background: #eee;
  }
  &>div {
      width: 100%;
  }
  & .msg-title {
      margin: 8px 0;
      margin-top: 2px;
      height: 16px;
      line-height: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      & .msg-name {
          font-size: 14px;
          color: #333;
      }
      & .msg-time {
          font-size: 12px;
          color: #999;
      }
  }
  & .msg-detail {
      font-size: 12px;
      width: 100%;
      line-height: 18px;
      color: #999;
      word-wrap: break-word;
  }
}
</style>